import { useEffect, useState } from "react"
import { Button } from "antd"
import { getStorageManager } from '@/storage'
import { dataURItoBlob, ensureExtName } from '@/storage/utils'
import LazyImage from "./LazyImage"

export default function ScreenshotList() {

    const [list, setList] = useState<any[]>([])

    // 获取列表
    const getList = () => {
        getStorageManager().getScreenshotStorage().list().then(list => {
            console.log(list)
            setList(list)
        })
    }

    // 截屏
    const handleTakeScreenshot = () => {
        chrome.runtime.sendMessage({
            "action": 'takeScreenshot'
        }, async (response) => {
            console.log(response, 'takeScreenshot response')
            await getStorageManager().getScreenshotStorage().overwrite(ensureExtName('.png', 'a.png'), dataURItoBlob(response.data))
            getList()
        })
    }

    //  截全屏
    const handleTakeFullScreenshot = () => {
        chrome.runtime.sendMessage({
            "action": 'takeFullScreenshot'
        }, async (response) => {
            console.log(response, 'takeFullScreenshot response')
            await getStorageManager().getScreenshotStorage().overwrite(ensureExtName('.png', 'b.png'), dataURItoBlob(response.data))
            getList()
        })
    }


    const downloadScreenshot = (name: string, fullPath: string) => {
        return getStorageManager().getScreenshotStorage().read(fullPath, 'ArrayBuffer')
            .then((buffer: any) => {
                const blob = new Blob([new Uint8Array(buffer)]) // 转blob
                // 3. 创建下载链接并触发下载
                const url = URL.createObjectURL(blob);
                const link = document.createElement('a');
                link.href = url;
                link.download = name; // 下载文件名
                document.body.appendChild(link);
                link.click();

                // 4. 清理临时URL
                setTimeout(() => {
                    URL.revokeObjectURL(url);
                    document.body.removeChild(link);
                }, 0);
            })
    }

    const handleTakeSelectionScreenshot = () => {
        // 发送消息
        chrome.runtime.sendMessage({
            action: "PANEL_SELECT_AREA_ON_CURRENT_PAGE"
        })
    }

    // 请求数据
    useEffect(() => {
        getList()
    }, [])

    return <div>
        <Button onClick={handleTakeScreenshot}>视口区域截图</Button>
        <Button onClick={handleTakeFullScreenshot}>滚动截全图</Button>
        <Button onClick={handleTakeSelectionScreenshot}>选择截图</Button>
        <ul className="screntshot-list">
            {
                list.map(item => {
                    return <li key={item.fullPath}>
                        <LazyImage fullPath={item.fullPath} />
                        <span>{item.name}</span>
                        <Button
                            onClick={() => {
                                getStorageManager().getScreenshotStorage().read(item.fullPath, 'DataURL').then((dataUrl: any) => {
                                    chrome.downloads.download({
                                        url: dataUrl,
                                        filename: item.name
                                    });
                                })
                            }}
                        >

                            Ext下载
                        </Button>

                        <Button
                            onClick={() => {
                                downloadScreenshot(item.name, item.fullPath)
                            }}
                        >

                            下载
                        </Button>
                    </li>
                })
            }
        </ul>
    </div>
}